
<template>
  <div class="yj02">
      <div class="rq season">
        <div class="item">春</div>
        <div class="item">夏</div>
        <div class="item">秋</div>
        <div class="item">冬</div>
      </div>
      <div class="rq month" @click="clickMonth">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>       
      </div>

  </div>
</template>

<script setup >
import { ref, onMounted } from 'vue'
const path = ref('')
const html = document.documentElement;

// window.onload = () => {
//   const months = document.querySelectorAll('.month .item');
//   console.log(months)
// }
let months;
let defultUrl= new URL(`../../assets/img/1.jpg`, import.meta.url);
const clickMonth = (e) => {  
  console.log(e.target.innerText)
  console.log(e.target)
  console.log(months)
  const month = e.target.innerText;
  const url = new URL(`../../assets/img/${month}.jpg`, import.meta.url) 
  html.style.removeProperty('--c1');
  html.style.removeProperty('--c2');
  html.style.removeProperty('--c3');
  html.style.background = `url(${url}) no-repeat  left top/100% fixed #000`
 
  if(months && months.length > 0) {
    months.forEach(item => {
      if(item !== e.target) {
        item.style.background = 'transparent'
      }
    })
  }
  e.target.style.background = '#ccc'
}
onMounted(() => {
  months = document.querySelectorAll('.month .item');
  html.style.removeProperty('--c1');
  html.style.removeProperty('--c2');
  html.style.removeProperty('--c3');
  html.style.background = `url(${defultUrl}) no-repeat  left top/100% fixed #000`
  
  console.log(months)
})

</script>

<style scoped>
html {
 background: url('../../assets/img/2.jpg') no-repeat  left top/100% fixed #000;
}
.rq {
  height: 50px;
  margin: 0 auto;
  line-height: 50px;
  border: 2px solid #ccc;
  border-radius: 6px;
  background: #fff;
}
.season {
   width: 360px;
}
.month { 
  margin-top: 20px;
  width: 1080px;
  cursor: pointer;
}
.item {
  display: inline-block;
  width: 90px;
  text-align: center;
  line-height: 50px; 
}


</style>
